<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3575128_fm07ml8o29f.css">
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
  <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
  <title>React App</title>
  
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
</body>
<script>
  // 获取当前屏幕宽度
  // 通常使用meta[name="viewport"]标签让布局视口和视觉视口等宽
  const width = window.document.documentElement.clientWidth

  // 我们都知道em是相对于父元素的font-size大小来设置
  // rem(root em)则是相当于根元素的font-size 
  // 这里让1rem等于屏幕百分之十的宽度
  window.document.documentElement.style.fontSize = width / 10 + "px"
  
  // 因为字体大小会进行样式继承
  // 因此重置body内部字体大小，重新让字体变回默认值
  window.document.body.style.fontSize='16px'
</script>
</html>